Imágenes como marca de agua

Los fotógrafos tiene una lucha constante con la forma de proteger sus fotografías, porque una vez colgadas en internet dejan de ser privadas para ser públicas a no ser que tengan el acceso restringido y las usen para su disfrute personal, aún así sigo pensando que una vez subimos una imagen a internet perdemos el control total sobre ella y debemos asumir las consecuencias.

Hay algunas formas de hacer que no se lleven las fotografías, una de ellas es inhabilitando el botón derecho del ratón, pero no es más que una estrategia para hacer perder el tiempo a la persona que desea llevarse la fotografía porque casi todos sabemos que desde el código fuente del blog podemos acceder a la url de la imagen.

Watermark es uno de esos sitios online al igual que Signgenerator, Picmarkr, Watermarktool o PicGhost con la diferencia que además de añadir texto también podemos añadir como marca de agua una imagen.

La imagen que normalmente descargamos a nuestro PC la obtenemos en un archivo zip, debemos descargarlo y extraer la imagen para hacer uso de ella.

Desde la salida del diseñador de plantillas muchos optaron por la facilidad que proporciona diseñar la plantilla en unos sencillos pasos, no voy a entrar en detalles sobre si es mejor o peor, más o menos recomendable que personalizar la plantilla uno mismo porque lo que para unos es mejor para otros puede terminar en una odisea.

Naturalmente tengo mi opinión y es que las plantillas creadas con el diseñador no sólo cambian el diseño exterior sino también el interior es decir, que la plantilla es completamente distinta a lo que estamos acostumbrados a ver y los códigos que veremos serán como poco muy extraños.

No hay garantías de poder aplicar los tutoriales o explicaciones que normalmente encontramos para Blogger, si tenemos tiempo de sobra y no sabemos que hacer entonces no hay problema utilicemos el diseñador y a divertirse pero si pensamos que la plantilla es algo que en un futuro vamos a modificar hay que pensarlo dos veces.

¿Por qué digo todo esto? porque llegan preguntas y dudas, muchas dudas sobre la forma de hacer esto o aquello una vez tenemos instalada una de las nuevas plantillas y en la mayoría de casos no tengo respuesta porque para tenerla es necesario dedicar horas a cada caso en concreto y como decía anteriormente sin garantías de encontrar la solución.

Las nuevas plantillas me recuerdan un poco a las plantillas adaptadas de otras plataformas en general son bellas, originales y complicadas de entender porque en la adaptación no se ha tomado la precaución de sustituir los códigos por los originales de Blogger ni de limpiar el código inutilizable.

Me recuerdan también cuando compramos un electrodoméstico, hay que entender el manejo, configurarlo, ponerlo en marcha y siempre pensamos que algo más sencillo nos haría el mismo papel, dos botones uno para encender y otro para apagar y menos historias que nos compliquen la vida.

Las nuevas plantilla son eso, uno simple clikc y un nuevo diseño en menos que canta un gallo, pero es que resulta que antes de darnos cuenta ese electrodoméstico complicado lo usamos todos los días y terminamos configurandolo con los ojos cerrados. Y con el tiempo nos alegramos de tener un aparato con diversas funciones que lo manejamos y configuramos a nuestro antojo, esas son las plantillas originales de Blogger las que se prestan a casi todo y se dejan manejar.

Las plantillas que Blogger proporcionaba antes de aparecer el diseñador y las nuevas plantillas siguen estando a disposición de todos para descargarlas y lógicamente usarlas, las encontraremos si en plantilla de Edición de HTML nos situamos al final del todo donde dice:

Aunque la imagen está cortada justo después de Plantillas antiguas dice:

"Puedes utilizar todavía las plantillas antiguas para tu blog, pero no podrás acceder a muchas de las funciones nuevas como, por ejemplo, el Diseñador de plantillas"

 A pesar de lo que dice ahí he probado varias veces a instalar plantillas "antiguas" y en todas aparece la opción de diseñador de plantillas, otras mejoras como el nuevo editor de entradas tiene las mismas funciones y que yo recuerde no hay muchas más.

Como siempre a la pregunta de ¿Qué hago me la instalo de las nuevas? la respuesta es siempre la misma instala la que mejor se ajuste a tus necesidades pero ten en cuenta todo lo anterior y si piensas modificar la plantilla entonces intenta instalarla en un blog de pruebas y juega con ella porque te vas a entretener.

Si pasado un tiempo prudencial te haces con el manejo, la personalizas y consigues que todos los trucos que deseas añadir funcionen entonces ¡Enhorabuena! esperamos tus aportes con ilusión y con ellos se habrá dado un gran paso que seguramente pasará a la historia.

Visto en:Pokkisam

Los experimentos de dhteumeuleu son espectaculares, pero como bien dijo JMiur en su día no hay explicación, están creados con la idea de pasar el rato y divertirse, simplemente porque sí, por  la satisfacción de conseguir que funcione.

En xyberneticos nos muestran un bonito efecto que nos permite añadir una imagen con texto oculto que se muestra al pasar el cursor.

Para el ejemplo he añadido una imagen pero el autor ha creado una galería, es posible añadir cualquier número de imágenes siempre que tengamos en cuenta que la suma del ancho de las imágenes no sea superior al espacio donde vamos a añadirlo.

La galería del autor la podemos conseguir de la siguiente forma.
Si estamos utilizando jQuery seguramente ya tenemos añadido el siguiente script en nuestra plantilla, de no tenerlo lo añadimos antes de </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js' type='text/javascript'/>

Y a continuación el siguiente:

<script type='text/javascript'>
$(document).ready(function()
{
 $(&#39;.galleryImage&#39;).hover(
  function()
  {

  $(this).find(&#39;img&#39;).animate(
                { width:100,
                  marginTop:10,
                  marginLeft:10
                }, 500);

   },
   function()
   {

    $(this).find(&#39;img&#39;).animate(
                 {width:325,
                  marginTop:0,
                  marginLeft:0
                },300);

   });
});
</script>

Los estilos los añadimos antes de ]]></b:skin>

.galleryContainer
{
width: 1024px; /*  Ancho del contenido */ 
}
.galleryImage {   /* Las imágenes */ 
     background-color:black;
     width:325px;
     height:260px;
     overflow:hidden;
     margin:5px;
     float:left;
}
.info{   /*  Texto adicional */ 
margin-left:10px;
font-family:arial;
padding:3px;
}
.info h2{  /* Títulos */ 
color:gray;
}
.info p {
color:white;
}
.clear {
clear:both;
margin-top:10px;
}

Una vez tenemos añadido lo anterior guardamos los cambios y en un gadget de HTML incluimos las imágenes y el texto:

<div class="galleryContainer">
<div class="galleryImage">
<img src="url-imagen">
<div class="info">
<h2>Título</h2>

Texto adicional.


</div>
</div>
<div class="galleryImage">
<img src="url-imagen">
<div class="info">
<h2>Título</h2>

Texto adicional.


</div>
</div>
<div class="galleryImage">
<img src="url-imagen">
<div class="info">
<h2>Título</h2>

Texto adicional.


</div>
</div>
<div class="galleryImage">
<img src="url-imagen">
<div class="info">
<h2>Título</h2>

Texto adicional.


</div>
</div>
<div class="galleryImage">
<img src="url-imagen">
<div class="info">
<h2>Título</h2>

Texto adicional.


</div>
</div>
<div class="galleryImage">
<img src="url-imagen">
<div class="info">
<h2>Título</h2>

Texto adicional.


</div>
</div>
</div>

Más sitios para descargar fuentes gratuitas, urbanfonts ofrece la posibilidad de escoger color de fuente y fondo, como puede verse en la captura también proporciona distintos tamaños de texto de esa forma nos podemos hacer una idea del resultado final antes de utilizarla.

En Pczeros he visto una explicación muy sencilla para que las visitas puedan cambiar el color de fondo del blog con un simple click, se trata de un gadget con unas imágenes a modo de cuadritos que bien pueden ser cualquier otra imagen, dicha imagen funciona con el evento onclick y al marcar sobre ella cambia el color de fondo del blog.

Para probar he creado unas imágenes de muestra que como decía pueden sustituirse por otras creadas por nosotros, la forma de añadirlo es muy sencilla simplemente copiamos el siguiente código y lo añadimos allí donde deseamos mostrarlo, si se trata de un gadget escogeremos para añadirlo HTML/Javascript.

<div style="text-align: center;">
<a href="#" onclick="javascript:document.body.style.backgroundColor='#AA0104'; document.body.style.backgroundImage='none';"><img src="http://2.bp.blogspot.com/_q4j3j-JA2ro/TEXjE6mn-vI/AAAAAAAAPK0/1tTNqvHEUY4/s0/rojo2.jpg" /></a>

<a href="#" onclick="javascript:document.body.style.backgroundColor='#199686'; document.body.style.backgroundImage='none';"><img src="http://2.bp.blogspot.com/_q4j3j-JA2ro/TEXjEsbE0CI/AAAAAAAAPKs/G1qgkM5Y2LQ/s0/azul1.jpg" /></a>

<a href="#" onclick="javascript:document.body.style.backgroundColor='#FFFFFF'; document.body.style.backgroundImage='none';"><img src="http://1.bp.blogspot.com/_q4j3j-JA2ro/TEXjFo-nCQI/AAAAAAAAPLE/WitlrlK0d9U/s0/blanco4.jpg" /></a>

<a href="#" onclick="javascript:document.body.style.backgroundColor='#000000'; document.body.style.backgroundImage='none';"><img src="http://2.bp.blogspot.com/_q4j3j-JA2ro/TEXjFfaBKbI/AAAAAAAAPK8/zl21CdA7kcI/s0/negro3.jpg" /></a>

<a href="#" onclick="javascript:document.body.style.backgroundColor='#EB6E14'; document.body.style.backgroundImage='none';"><img src="http://1.bp.blogspot.com/_q4j3j-JA2ro/TEXjF77WEII/AAAAAAAAPLM/lC1tv4BSEis/s0/naranja6.jp" /></a>
</div>

Esto es una imagen, para ver el ejemplo click sobre ella.

Cada cuadrito es una imagen y la url de cada imagen será el enlace que hará cambiar el color de fondo de body.

Si seguimos jugando descubrimos que también es posible hacerlo con texturas en lugar de colores, lo conseguimos de la siguiente forma:

<div style="text-align: center;">
<a href="javascript:void(0)" onclick="javascript:document.body.style.backgroundImage='url(http://1.bp.blogspot.com/_q4j3j-JA2ro/TEYXJUbHV9I/AAAAAAAAPMU/iVqNdQUbh8M/s200/fondo1.jpg)'; document.body.style.backgroundColor='none';"><img style="width:30px;height:30px;" src="http://1.bp.blogspot.com/_q4j3j-JA2ro/TEYXJUbHV9I/AAAAAAAAPMU/iVqNdQUbh8M/s200/fondo1.jpg" /></a>

<a href="javascript:void(0)" onclick="javascript:document.body.style.backgroundImage='url(http://2.bp.blogspot.com/_q4j3j-JA2ro/TEYXJhQP8SI/AAAAAAAAPMc/_BXEGKqTpUE/s200/fondo2.jpg)'; document.body.style.backgroundColor='none';"><img style="width:30px;height:30px;" src="http://2.bp.blogspot.com/_q4j3j-JA2ro/TEYXJhQP8SI/AAAAAAAAPMc/_BXEGKqTpUE/s200/fondo2.jpg" /></a>

<a href="javascript:void(0)" onclick="javascript:document.body.style.backgroundImage='url(http://2.bp.blogspot.com/_q4j3j-JA2ro/TEYXJ8F2RII/AAAAAAAAPMk/6GBkhMCzvnU/s200/fondo3.jpg)'; document.body.style.backgroundColor='none';"><img style="width:30px;height:30px;" src="http://2.bp.blogspot.com/_q4j3j-JA2ro/TEYXJ8F2RII/AAAAAAAAPMk/6GBkhMCzvnU/s200/fondo3.jpg" /></a>

<a href="javascript:void(0)" onclick="javascript:document.body.style.backgroundImage='url(http://1.bp.blogspot.com/_q4j3j-JA2ro/TEYXKQDH80I/AAAAAAAAPMs/v5Ks0TeSESc/s200/fondo4.jpg)'; document.body.style.backgroundColor='none';"><img style="width:30px;height:30px;" src="http://1.bp.blogspot.com/_q4j3j-JA2ro/TEYXKQDH80I/AAAAAAAAPMs/v5Ks0TeSESc/s200/fondo4.jpg" /></a>

<a href="javascript:void(0)" onclick="javascript:document.body.style.backgroundImage='url(http://3.bp.blogspot.com/_q4j3j-JA2ro/TEYXK5oXa-I/AAAAAAAAPM0/Q4-q_hpXKxk/s200/fondo5.jpg)'; document.body.style.backgroundColor='none';"><img style="width:30px;height:30px;" src="http://3.bp.blogspot.com/_q4j3j-JA2ro/TEYXK5oXa-I/AAAAAAAAPM0/Q4-q_hpXKxk/s200/fondo5.jpg" /></a>
</div>

Como se puede ver hemos cambiado backgroundColor por backgroundImage, es necesario añadir la url de la imagen dos veces una para el fondo y otra para la miniatura que mostramos.

El tamaño de las miniaturas lo podemos modificar con width para la anchura y height para la altura.

Crear fotomontajes en SeeNow es muy sencillo simplemente cargamos la fotografía, la movemos para que coincidan los ojos en la plantilla que escogimos  y rotamos la imagen hasta situarla en el lugar indicado , guardamos la imagen con el botón naranja de la derecha y ya tenemos nuestra obra de arte para reírnos de nosotros mismos o mandarla a los amigos y que se rían ellos también.

Estilo Polaroid para estos iconos a redes sociales, contiene 16 iconos en formato PNG.

YouTube , Delicious, RSS , Twitter , Facebook , Flickr , Digg , stumpleupon , MySpace, Feedburner , Skype , Yahoo, Last.fm , Linkin , Reddit y Gmail.

Rereferencia y descarga: webtoolkit4.me

En Scrapee.net podemos jugar con imágenes y añadirles efectos.

¿Qué cosas podemos hacer? por ejemplo añadir marcos, escribir sobre las fotografías, añadir efecto agua, recortar, cambiar el rostro, crear wallpapers, redimensionar, montajes, añadir brillitos más conocidos por glitter, gif animados.

Al igual que muchos sitios suelen hacer cuando descargamos la imagen nos damos cuenta que lleva un texto con el nombre de la página, queda poco estético la verdad, personalmente pienso que si los sitios que suelen hacerlo omitieran ese detalle se usarían más los servicios que proporcionan.

Plantillas para Blogger Colorize Templates

En encreamundo.com podemos encontrar más de 9.800 fuentes tipográficas y descargarlas de forma gratuita, además ofrecen la posibilidad de descargar todas las fuentes juntas empaquetadas en un único archivo al un precio de 6.50€. Algo que me ha gustado mucho es la posibilidad de visualizar nuestro propio texto antes de descargar la fuente.

Si eres aficionado a las fuentes este otro enlace de Bloc de apuntes te vendrá muy bien.

En ¿Cómo se hace? el blog que actualiza y mantiene Vku he visto una imagen con la particularidad que contiene un botón de cerrar, cuando hacemos click sobre el botón la imagen desaparece, en un principio quizás no se vea nada del otro mundo pero tiene su utilidad cuando se trata de mostrar contenido de interés y que este tenga un lugar preferente sin llegar a molestar la lectura. Es necesario utilizar un script y lógicamente el contenido que deseamos mostrar.

La forma de añadirlo es la siguiente, justo antes de </head> añadimos el script:

<script>

function cerrarimagen(){

div = document.getElementById("cerrar");

div.style.display="none";

}

</script>

Y el bloque de añadir las imágenes después de <body>

<div id='cerrar' style='border: 0 !important; background: transparent; left:830px;top:60px;position:fixed;width: 60px;z-index:9999'> <a href='javascript:cerrarimagen();'><img src='url-imagen-cerrar' style='float: right;' title='Cerrar'/><img src='url-imagen-a-mostrar'/></a></div>

Para el ejemplo no he sido muy imaginativa dada la euforia que se vive ahora mismo en la calle con el mundial y a media hora de comenzar el partido que pasará a la historia así que añadí la misma idea que nuestro amigo de ¿Cómo se hace?

* Con width movemos la imagen a mostrar hacia la izquierda o derecha.

* La imagen de cerrar la añadimos ayudándonos de left y top porque según el tamaño de la imagen nos quedará en una esquina u otra.

* Con float: right indicamos si la imagen la añadimos a la derecha y con float: left en caso de ser a la izquierda.